/**
 * 登录页面
 * 由 WangYu 创建
 * 日期 2017/9/26
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    StatusBar, TextInput,NativeModules,AsyncStorage
} from 'react-native';
import CommonNavigationBar from "../../view/CommonNavigationBar";
import {themeColor} from "../../util/Config";
import NetUtils from "../../util/NetUtils";
import Api from "../../util/Api";
import  {Toast} from "teaset";
import Button from "../../view/Button";
import {Actions} from "react-native-router-flux";
import {add, login, logout} from "../../redux/action";
import {connect} from "react-redux";
import StringUtil from "../../util/StringUtil";
import Spinner from "../../view/Spinner";
class LoginPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            phone: '',
            passWord: '',
            warnText: '',
            needValidate: false,
            progressVisible:false,
        }
    }

    render() {
        return (
            <View style={styles.container}>
                {/*状态栏*/}
                <StatusBar
                    backgroundColor={'#ffe466'}
                    barStyle="light-content"
                    animated={true}/>
                {/*标题栏*/}
                <CommonNavigationBar backgroundColor={'#ffe466'}
                                     title='填写手机号'
                                     onLeftButtonPress={this.onLiftButtonPress}/>
                <View style={{
                    paddingLeft: 20,
                    paddingRight: 20
                }}>
                    {/*账号和密码输入框*/}
                    <TextInput style={[styles.textInputStyle, {marginTop: 20}]}
                               underlineColorAndroid={'transparent'}
                               placeholder={'请您输入手机号'}
                               placeholderTextColor={'#d5d5d5'}
                               keyboardType={'numeric'}
                               maxLength={11}
                               onChangeText={text => this.setState({phone: text})}
                    />
                    <TextInput style={[styles.textInputStyle, {marginTop: 20}]}
                               underlineColorAndroid={'transparent'}
                               placeholder={'请您输入密码'}
                               placeholderTextColor={'#d5d5d5'}
                               secureTextEntry={true}
                               onChangeText={text => this.setState({passWord: text})}
                               onSubmitEditing={() => Toast.message('提交')}
                    />
                    {this.state.needValidate ?
                        <View>

                        </View> : null}
                    <Text style={{color: 'white', marginTop: 15,}}>{this.state.warnText}</Text>
                    <Button title={'登录'} onPress={() => this.check()} style={{marginTop: 15}}/>
                    <View style={{flexDirection: 'row', justifyContent: 'space-between', marginTop: 10}}>
                        <Text style={{color: '#aaaaaa', fontSize: 11}}>没有账号，<Text style={{color: '#0786e7'}} onPress={()=>Actions.RegisterPage()}>去注册</Text></Text>
                        <Text style={{color: '#0786e7', fontSize: 11}}>忘记密码?</Text>
                    </View>
                </View>
                <Spinner cancelable={true} visible={this.state.progressVisible} textContent={"加载中..."} textStyle={{color: '#FFF'}} />
            </View>
        );
    }

    check() {
        let phone = this.state.phone;
        let pwd=this.state.passWord;

        //检查手机号
        if (!StringUtil.isPhoneNumber(phone)) {
            this.setState({warnText: '请输入正确的手机号'});
            Toast.message('请输入正确的手机号');
            return;
        }
        if (this.state.needValidate) {
            //验证码校验
        }
        //检查密码
        if(pwd===''){
            this.setState({warnText:'密码不能为空'});
            Toast.message('密码不能为空');
            return;
        }
        //开始登录  拼接参数
        let params='mobile='+phone+'&password=';
        this.setState({progressVisible:true});
        NativeModules.MyNativeMoudle.privateEncrypt(this.state.passWord,(pwd)=>{
            params+=encodeURI(pwd);
            NetUtils.post(Api.login,params,(result)=>{
                if(result.code!==1){
                    Toast.message(result.message);
                    return;
                }
                Toast.success('登录成功', 'short', 'center');
                //netutil用的api存值
                Api.isLogin=true;
                Api.userInfo=result.object;
                //发起登录action
                this.props.dispatch(login(result.object));
                Actions.pop();
                //本地存储userid和token
                storage.save({
                    key: 'userInfo',  // 注意:请不要在key中使用_下划线符号!
                    data: {
                        userId:result.object.userId,
                        token:result.object.token
                    },
                });
            },()=>this.setState({progressVisible:false}));
        });
    }

    componentDidMount() {

    }

    onLiftButtonPress = () => {
        //主动退出登录页面 要将userId和token置空
        Actions.pop();
        Api.isLogin=false;
        this.props.dispatch(logout());
    }
}
export default connect()(LoginPage);
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffe466',
    },
    textInputStyle: {
        height: 30,
        backgroundColor: 'white',
        borderRadius: 3,
        borderWidth: 0.5,
        borderColor: '#aaaaaa',
        padding: 0,
        paddingLeft: 10,
        color: '#010101'
    }
});
